<script lang='ts' setup>
import { ref, onMounted, VNodeRef, h } from "vue";
import PcList from "@/components/note/PcList.vue";
import MobileList from "@/components/note/MobileList.vue";
import CreatedNote from "@/components/note/CreatedNote.vue";
import NoteList from "@/components/note/NoteList.vue";
import { NoteInfo } from "@/models/Note";
import router from "@/router";
import { appNotify, NotifyOption, NotifyType } from "@/models/app.notify";

const indexDom = ref<VNodeRef>(null);
const isCreated = ref(false);
const isNoteList = ref(false);
const isPc = ref(false);
const isLoading = ref(false);

const bodyDom = ref({});
const pcList = ref<VNodeRef>(null as VNodeRef);
const mobileList = ref<VNodeRef>(null as VNodeRef);

onMounted(() => {
  appNotify.addListener(NotifyType.Note, init, 'note')
  isLoading.value = true;
  setTimeout(() => {
    const { clientWidth, clientHeight, clientTop } = indexDom.value;
    bodyDom.value = { clientWidth, clientHeight, clientTop };
    console.log(clientWidth, clientHeight, clientTop);
    isPc.value = clientWidth > 500;
    isLoading.value = false;
  }, 300);
});

function init(): void {
  pcList.value?.init();
  mobileList.value?.getList();
}

function close(flag: boolean): void {
  if (flag) {
    init();
  }
  isCreated.value = false;
}

function onNote(item: NoteInfo): void {
  router.push("note/detail?uid=" + item.uid)
}
</script>
<template>
  <div class="index" ref="indexDom">

    <PcList :bodyDom="bodyDom" v-if="isPc && !isLoading" ref="pcList" @click="onNote"></PcList>
    <MobileList v-if="!isPc && !isLoading" ref="mobileList" @click="onNote"></MobileList>

    <div class="suspension-btn">
      <div class="add-circle flex" @click="isCreated = true">
        <t-icon class="icon" name="add-circle" size="20" />添加
      </div>
      <!-- <div class="add-circle flex" @click="isNoteList = true">
        <t-icon class="icon" name="bulletpoint" size="20" />我的
      </div> -->
    </div>
    <CreatedNote :visible="isCreated" @close="close"></CreatedNote>
    <!-- <NoteList :visible="isNoteList" @close="isNoteList = false"></NoteList> -->


    <t-back-top :visible-height="100" shape="circle" size="small" style="position: fixed; right: 7px; bottom: 37px"></t-back-top>
  </div>
</template>
<style lang='scss' scoped>
.index {
  width: 100%;
  flex: 1;
  position: relative;
  padding: 40px;

  .suspension-btn {
    position: fixed;
    right: 0;
    bottom: 10%;

    .add-circle {
      border-radius: 50px 0 0 50px;
      box-shadow: 0 0 7px #457b9d31;
      color: #1d3557;
      font-size: 15px;
      padding: 5px 10px;
      box-sizing: border-box;
      cursor: pointer;
      margin-bottom: 10px;

      &:hover {
        box-shadow: 0 0 7px #457b9dbe;
        transform: translateY(-1px);
      }

      .icon {
        font-size: 27px;
        margin-right: 3px;
      }
    }
  }
}
</style>